<template>
	<view class="dialog">
		<el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleDialogClose">
			<!-- 新增媒体 or 媒体审核 -->
			<el-form ref="form" :model="form" label-width="130px" :rules="rules">
				<el-form-item label="媒体名称" class="item" prop="linkName">
					<el-input v-model="form.linkName" placeholder="请填写广告媒体名称" :disabled="title == '审核'"></el-input>
				</el-form-item>
				<el-form-item label="媒体行业标签" class="item" prop="select2">
					<el-select v-model="form.select2" placeholder="请选择" @change="selectChange" :disabled="title == '审核'">
						<el-option :label="t" :value="t" v-for="(t, i) in selectArr1" :key="i"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="行业广告" class="item" prop="select1">
					<el-select v-model="form.select1" placeholder="请选择" :disabled="title == '审核'">
						<el-option :label="t2.mcAdvertising" :value="t2.mcAdvertising" v-for="(t2, i2) in currentSelectArr" :key="i2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="网站域名" class="item" prop="link">
					<el-input v-model="form.link" placeholder="请填写网站域名" :disabled="title == '审核'"></el-input>
				</el-form-item>
				<el-form-item label="媒体关键词" class="item" prop="keyword">
					<el-input v-model="form.keyword" placeholder="请填写广告关键词" :disabled="title == '审核'"></el-input>
				</el-form-item>
				<el-form-item label="媒体简介" class="item" prop="profile">
					<el-input type="textarea" v-model="form.profile" rows="8" resize="none" minlength="40" placeholder="请填写媒体简介,不得少于40字" :disabled="title == '审核'"></el-input>
				</el-form-item>
				<el-form-item label="支持下载类广告" class="item" prop="radio">
				    <el-radio-group v-model="form.radio" :disabled="title == '审核'">
				      <el-radio :label="0">支持</el-radio>
				      <el-radio :label="1">不支持</el-radio>
				    </el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer" v-if="title == '新增媒体'">
				<el-button type="primary" @click="handleClose(1)" v-preventReClick>提交审核</el-button>
				<el-button @click="handleClose(false)">取 消</el-button>
			</span>
			<span slot="footer" class="dialog-footer" v-if="title == '审核'">
				<el-button type="primary" @click="handleClose(2)" v-preventReClick>通过</el-button>
				<el-button type="danger" @click="handleClose(3)" v-preventReClick>拒绝</el-button>
				<el-button @click="handleClose(false)">取 消</el-button>
			</span>
		</el-dialog>
	</view>
</template>
<script>
	import {
		Request
	} from '../../model/request.js'
	import {
		Util
	} from '../../utils/util.js'
	// import {
	// 	config
	// } from "../../api/config.js";
	// import {
	// 	ServerUrl
	// } from "../../api/server_url.js";
	export default {
		props: {
			dialogVisible: '',
			second: '',
			title: '',
			item: {}
		},
		
		data() {
			return {
				form: {
					linkName: '',
					select1: '',
					select2: '',
					link: '',
					keyword: '',
					profile: '',
					radio: 1
				},
				selectArr1: [], // 标签
				selectArr2: [], // 广告
				currentSelectArr: [],
				rules: {
					linkName: [{
						required: true,
						message: '请输入媒体名称',
						trigger: 'blur'
					}],
					select1: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					select2: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					link: [{
							required: true,
							message: '请填写网站域名',
							trigger: 'blur'
						},
						{
							pattern: /http[s]{0,1}:\/\/([\w.]+\/?)\S*/,
							message: '请输入正确的域名地址'
						}
					],
					keyword: [{
						required: true,
						message: '请填写广告关键词',
						trigger: 'blur'
					}],
					profile: [
						{
							required: true,
							message: '请填写媒体简介，不得少于40字',
							trigger: 'blur'
						},
						// {
						// 	pattern: /[\w\W]{40}/,
						// 	message: '不得少于40字'
						// }
					]
				}
			}
		},
		
		async mounted() {
			let res = await Request.MEDIAFINDMAL()
			if (res.code == 200) {
				let arr1 = []
				let arr2 = []
				res.data.forEach(t => {
					arr1.push(t.mcMal)
					arr2.push(t.voList)
				})
				this.selectArr1 = arr1
				this.selectArr2 = arr2
			}
		},
		
		watch: {
			dialogVisible(newVal) {
				console.log(newVal, 'newVal')
				if (this.title == '审核') {
					this.form = {
						linkName: this.item.mediaName,
						select1: this.item.mcAdvertising,
						select2: this.item.mcMal,
						link: this.item.websiteName,
						keyword: this.item.mediaKeyword,
						profile: this.item.mediaIntro,
						radio: Number(this.item.mcToa) || 0
					}
					console.log(this.form, this.item)
				}
			}
		},
		
		methods: {
			selectChange(e) {
				this.form.select1 = ''
				let i = this.selectArr1.findIndex(t => t == e)
				this.currentSelectArr = this.selectArr2[i]
			},
			
			handleDialogClose(flag=false) {
				this.form = {
					username: '',
					pwd: '',
					phone: '',
					email: '',
					contacts: '',
					bankNumber: '',
					toBank: '',
					address: '',
					linkName: '',
					link: '',
					channel: '',
					linkState: 1,
					newLink: ''
				}
				this.$emit('closeDialog', flag)
				this.$nextTick(() => {
					this.$refs.form.clearValidate()
				})
			},
			
			async handleClose(e) {
				if (e) {
					if (e == 1) { // 提交审核审核
						console.log(this.form.select1, this.form.select2, this.form.radio, this.form.profile, this.form.keyword, this.form.linkName, this.form.link)
						this.$refs.form.validate(async (valid) => {
							if (valid) { // 效验成功，无错误
							console.log(123123, '晓燕成功')
								let res = await Request.MEDIAADD({
									mcAdvertising: this.form.select1, // 行业广告
									mcMal: this.form.select2, 		// 行业标签
									mcToa: this.form.radio, 		// 是否支持下载类广告
									mediaIntro: this.form.profile, 	// 媒体简介
									mediaKeyword: this.form.keyword,// 媒体关键字
									mediaName: this.form.linkName, 	// 媒体名称
									websiteName: this.form.link		// 网站域名
								})
								if (res.code == 200) {
									Util.showToast('添加成功')
									this.handleDialogClose(true)
								}
							} else {
								console.log('效验不成功，提交失败')
								return false
							}
						})
					} else if (e == 2) { // 通过
						console.log('执行了,,,,,,,,,,,,,', this.item.mediaId)
						let res = await Request.MEDIAUPDATE(
							this.item.mediaId,
							0
							// mcToa: this.form.radio, 		// 是否支持下载类广告
							// mediaIntro: this.form.profile, 	// 媒体简介
						)
						if (res.code == 200) {
							Util.showToast('审核成功')
							this.handleDialogClose(true)
						}
					} else if (e == 3) { // 拒绝
						let res = await Request.MEDIAUPDATE(
							this.item.mediaId,
							3
							// mcToa: this.form.radio, 		// 是否支持下载类广告
							// mediaIntro: this.form.profile, 	// 媒体简介
						)
						if (res.code == 200) {
							Util.showToast('审核成功')
							this.handleDialogClose(true)
						}
					}
				} else {
					this.handleDialogClose()
				}
			}
		}
	}
</script>
<style scoped>
	.dialog {
		/* width: 100%;
	height: 100%; */
		position: absolute;
		left: 0;
		top: 0;
	}

	.el-form-item {
		position: relative;
	}

	.el-form-item::before {
		content: '*';
		position: absolute;
		left: 100px;
		top: 13px;
		color: red;
	}

	/deep/ .item .el-form-item__label {
		position: relative;
		left: -20px;
		/* color: red;
		border: solid 1px red;
		margin-left: 30px; */
	}

	/deep/ .item .el-form-item__label::before {
		content: ' ' !important;
	}

	.photo {
		width: 299px;
		height: 200px;
	}
	
	.el-select {
		width: 100%;
	}
</style>
